<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="form">
        <h1>百度注册</h1>
        手机号码: <input type="text" id="inp" value="12345678900"><br>
        验证码: <input type="text"> <input type="button" id="btn" value="获取验证码">
        <input type="button" value="注册">
    </div>

    <script>
        var btn = document.getElementById("btn");
        var inp = document.getElementById("inp");


        btn.onclick = function () {
            if (inp.value.length == 11) {//当长度为11的时候才能获取
                var a = 60; //定义倒计时开始的值
                btn.value = "已经发送(" + a + "s)";
                btn.disabled = true; //点击后让按钮禁止被点击
                var date = setInterval(function () { //定义定时器时间为1秒
                    btn.value = "已经发送(" + (a - 1) + "s)"; //字符串拼接！！修改按钮的value值

                    if (a == 0) {
                        clearInterval(date); //当倒计时为0的时候，清楚定时器
                        btn.value = "重新获取"; //重置按钮的value
                        btn.disabled = false; //取消禁止点击属性
                    }
                    a--; //让a自减，让定时器执行的时候每次的数字都是自减后的,形成倒计时
                }, 1000);
            }
        }
    </script>
</body>

</html>